<template>
  <div class="box">
        <header class="header">
            <van-nav-bar style="width: 100%;background: rgba(250, 250, 250, 0.9)">
                <div slot="left">
                <span class="iconfont icon-zuo" @click="back"></span>
                </div>
                <div slot="title" style="color:#000;width: 100%;">浏览记录</div>
                <div slot="right">
                <span class="iconfont icon-ziyuan" @click="navlist"></span>
                </div>
            </van-nav-bar>
        </header>
        <div class="container">
            <nav class="nav-list" v-if="show">
                <ul>
                <router-link to="/home" tag="li">
                    <span class="iconfont icon-shouye"></span>
                    <p>首页</p>
                </router-link>
                <router-link to="/kind" tag="li">
                    <span class="iconfont icon-fenleisousuo"></span>
                    <p>分类</p>
                </router-link>
                <router-link to="/cart" tag="li">
                    <span class="iconfont icon-gouwuches"></span>
                    <p>购物车</p>
                </router-link>
                <router-link to="/user" tag="li">
                    <span class="iconfont icon-xiaolian"></span>
                    <p>我的</p>
                </router-link>
                </ul>
            </nav>
            <div class="spmc" v-if="listFlag">
                <ul>
                    <a
                     v-for="(item, index) of historylist"
                    :key="item.productid">
                        <li>
                            <div class="fl mar_8"
                                  @click="toDetail(item.productid)">
                                <img :src="item.imgurl">
                            </div>
                            <div class="fl text_wrap">
                                <p style="height:40px;font-size: 12px;margin-top:5px;"
                                  @click="toDetail(item.productid)">
                                  <span style="color:#d91616"></span>&nbsp;{{ item.productinfo }} - {{ item.productdsc }}
                                </p>
                                <p style="margin-top: 10px;margin-bottom:5px;">
                                    <span style="color:#111;">￥{{ item.nowprice }}</span>
                                    <span class="delete" @click="deleteItem(item.productid, index)">删除</span>
                                </p>
                            </div>
                        </li>
                    </a>
                </ul>
            </div>
            <div>
            <p class="clear" onclick="" v-if="listFlag" @click="delAll">清空</p>
            </div>
            <div id="goTopBtn" v-if="listFlag"><span></span></div>
            <div class="spmc" v-else>
                <p style="text-align:center;">&nbsp;</p>
                <p style="color:#666666; text-align:center;">暂无浏览记录</p>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Dialog } from 'vant'
Vue.use(NavBar)
Vue.use(Dialog)
export default {
  data () {
    return {
      show: false,
      listFlag: false,
      historylist: []
    }
  },
  mounted () {
    const hislist = localStorage.getItem('hislist')
    if (!hislist || JSON.parse(hislist).length === 0) {
      this.listFlag = false
    } else {
      this.listFlag = true
    }
    console.log(JSON.parse(hislist))
    this.historylist = JSON.parse(hislist)
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    navlist () {
      this.show = !this.show
    },
    toDetail (productid) {
      console.log(productid)
      this.$router.push({ path: '/detail/' + productid })
    },
    deleteItem (cartid, index) {
      Dialog.confirm({
        title: '删除',
        message: '你确认要删除该商品吗？'
      }).then(() => {
        this.historylist.splice(index, 1)
        console.log(this.historylist)
        localStorage.setItem('hislist', JSON.stringify(this.historylist))
      })
    },
    delAll () {
      Dialog.confirm({
        title: '删除',
        message: '你确认要删除全部商品吗？'
      }).then(() => {
        localStorage.removeItem('hislist')
        this.listFlag = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header{
    .iconfont{
        font-size: 0.22rem;
    }
}
.nav-list {
  @include rect(100%, 0.5rem);
  @include background-color(#fff);
  border-bottom: 1px solid #eee;
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    li {
      @include flex(); // flex: 1;
      @include rect(auto, 100%);
      // 水平垂直居中
      @include flexbox();
      @include flex-direction(column);
      @include justify-content();
      @include align-items();

      &.router-link-exact-active,
      .router-link-active {
        @include color(#ff734c);
      }

      span {
        @include font-size(22px);
      }
      p {
        @include font-size(12px);
      }
    }
  }
}
.container{
    .spmc {
        padding: 0 0.08rem;
        ul {
            border: none;
            margin: 0;
            padding: 0.14rem 0;
            border-bottom: 1px solid #eee;
            a{
                color: #666;
                display: block;
                margin-bottom: 0.11rem;
            }
            a+a{
            border-top: 1px solid #eee;
            }
            li {
                border: none;
                padding: 0;
                position: relative;
                overflow: hidden;
                .mar_8 {
                    margin-right: 0.15rem;
                    float: left;
                    margin-top: 0.04rem;
                    img {
                        width: 0.64rem;
                        height: 0.7rem;
                    }
                }
                .text_wrap {
                    width: 78%;
                    float: left;
                    font-size: 0.12rem;
                }
                p{
                    .delete {
                        margin-right: 0.08rem;
                        float: right;
                        border: 1px solid rgb(73,73,73);
                        border-radius: 0.02rem;
                        padding: 0 0.1rem;
                    }
                    span{
                        color: #111;
                    }
                }
            }
        }
    }
    .clear {
        width: 0.88rem;
        height: 0.32rem;
        line-height: 0.32rem;
        text-align: center;
        background-color: rgb(254,102,0);
        font-size: 0.14rem;
        color: #fff;
        border-radius: 0.02rem;
        margin: 0.16rem auto;
        clear: both;
    }
}
</style>
